<template>
	<view class="wttb_view">
		<u-navbar
			ref="navbar"	
			back-icon-name="arrow-leftward" 
			title="问题填报"
			:background="{
				background: '#5C77FF',
			}"
			title-color="#ffffff"
			back-icon-color="#ffffff">
		</u-navbar>
		
		<view class="content">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="项目" :border-bottom="false" prop="text" :required="true">
					<!-- <u-input @click="industryShow = true" v-model="form.text" type="select" :custom-style="{
							backgroundColor:'#f2f3f5',
							borderRadius: '5px',
							padding:'5px 10px',
						}" />
					<u-action-sheet :list="actionSheetList" v-model="industryShow" @click=""></u-action-sheet>
					<u-select v-model="industryShow" mode="single-column" :list="actionSheetList" @confirm="actionSheetCallback"></u-select> -->
					<u-input v-model="form.text" :border="true" @focus="showContainer" @blur="hiddenContainer" @input="changeSearch" />
					<view class="searchContainer" v-if="isShowContainer && searchList.length">
						<view>
							<view v-for="(item,index) in searchList" :key='index' @click="getResponsible(item)">{{item.title}}</view>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="问题类型" :border-bottom="false" :required="true">
					<u-radio-group v-model="form.type">
						<u-radio v-for="(item, index) in checkboxList" :key="index" :name="item.name">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="问题详情" :border-bottom="false" prop="remark" :required="true">
					<u-input v-model="form.remark" :custom-style="{
							backgroundColor:'#f2f3f5',
							borderRadius: '5px',
							padding:'5px 10px',
							margin: '0',
							minHeight:'50px',
						}" />
				</u-form-item>
				<u-form-item label="解决建议" :border-bottom="false" prop="suggest" :required="true">
					<u-input v-model="form.suggest" :custom-style="{
							backgroundColor:'#f2f3f5',
							borderRadius: '5px',
							padding:'5px 10px',
							margin: '0',
							minHeight:'50px',
						}" />
				</u-form-item>
				<u-form-item label="选择领导" :border-bottom="false" prop="currentDealer" :required="true">
					<u-input @click="leaderShow = true" v-model="form.leaderText" type="select" :custom-style="{
							backgroundColor:'#f2f3f5',
							borderRadius: '5px',
							padding:'5px 10px',
						}" />
					<u-select v-model="leaderShow" mode="single-column" :list="leaderList" @confirm="actionSheetCallback1"></u-select>
				</u-form-item>
				<u-form-item label="期望处理时间" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="handleShow" :params="params" @confirm="ensureHandleTime"></u-picker>
					<u-button @click="handleShow=true" :hair-line="false" :custom-style="{
						position: 'relative',
						backgroundColor:'#f2f3f5',
						borderRadius: '5px',
						margin: '0',
						border:'0px solid #ffffff',
					}">
						{{form.flowTime ? form.flowTime : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>
				<u-form-item label="文件上传" :border-bottom="false">
						<view class="flexContainer">
							<view class="chooseFile" :class={isColor:!form.name}>{{form.name ? form.name : '请选择文件上传'}}</view>
							<u-button :ripple="true" :hair-line="false" :custom-style="{
										width:'100px',
										float:'left',
										backgroundColor: '#5c77ff',
										color:'#ffffff',
									}"
							 @click="file_upload">
								上传附件
							</u-button>
						</view>
				</u-form-item>
			</u-form>
			<u-button :ripple="true" :hair-line="false" :custom-style="{
					backgroundColor: '#5c77ff',
					color:'#ffffff',
					margin:'20px 0',
					fontSize:'18px',
					padding:'5px 0',
					boxSizing:'content-box',
				}"
			 @click="on_add_data">
				提交问题
			</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		_get_system_info
	} from "@/my_tools/tools.js"
	import Page_return from "@/components/my_components/my_bt/page_return.vue"
	export default { //问题填报页面
		components: {
			Page_return
		},
		data() {
			return {
				isShowContainer: false,
				searchList: [],
				leaderShow:false,
				handleShow:false,
				industryShow: false,
				actionSheetList: [],
				leaderList:[],
				system_info: null,
				form: {
					leaderText:'',
					projectId: '',
					remark: '',
					state: '',
					type: '土地',
					name: '',
					text: '',
					suggest:'',
					currentDealer:'',
					flowTime:'',
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				rules: {
					text: [{
						required: true,
						message: '请选择项目',
						trigger: ['change', 'blur']
					}],
					remark: [{
						required: true,
						message: '请填写问题详情',
						trigger: ['change', 'blur']
					}],
					currentDealer:[{
						required: true,
						message: '请选择领导',
						trigger: ['change', 'blur']
					}]
				},
				checkboxList: [{
						name: '土地',
						value: 1,
					},
					{
						name: '资金',
						value: 2,
					},
					{
						name: '审批',
						value: 3,
					},
					{
						name: '方案',
						value: 4,
					},
					{
						name: '拆迁',
						value: 5,
					},
					{
						name: '其他',
						value: 6,
					},
				],
				add_data: {
					file: '',
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			this.getProjectItem()
			this.getLeaderList()
		},
		methods: {
			getResponsible(val) {
				this.form.text = val.title
				this.form.projectId = val.id;
			},
			showContainer() {
				this.isShowContainer = true
			},
			hiddenContainer() {
				setTimeout(() => {
					this.isShowContainer = false
					this.searchList = []
				}, 100)
			},
			changeSearch() {
				this.searchList = []
				this.companyLeaderList = []
				let url = '/wx/quest/select'
				this.$ajax({
					url: url,
					method: 'GET',
					data:{
						title:this.form.text
					},
					headers: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.state == 200) {
							if (res.data.data.length > 10) {
								for (var i = 0; i < 9; i++) {
									this.searchList.push(res.data.data[i])										
								}
							} else {								
								res.data.data.forEach(item => {
									this.searchList.push(item)
								})																	
							}
						}
					},
					complete: () => {
			
					},
				});
			},
			actionSheetCallback(val) {
				this.form.projectId = val[0].value;
				this.form.text = val[0].label
			},
			actionSheetCallback1(val) {
				this.form.leaderText = val[0].label;
				this.form.currentDealer = val[0].value
			},
			getProjectItem() {
				this.$ajax({
					url: '/wx/quest/select',
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200) {
							this.actionSheetList = res.data.data
							this.actionSheetList.forEach((item, index) => {
								item.label = item.title
								item.value = item.id
							})
						}
					},
					complete: () => {
						this.loading = false;
					},
				});
			},
			getLeaderList(){
				this.$ajax({
					url: '/wx/quest/select/user',
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200) {
							this.leaderList = res.data.data
							this.leaderList.forEach((item, index) => {
								item.label = item.nickname
								item.value = item.name
							})
						}
					},
					complete: () => {
						this.loading = false;
					},
				});
			},
			ensureHandleTime(data){
				this.form.flowTime = data.year + '-' + data.month + '-' + data.day
			},
			file_upload() { //文件上传
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						this.add_data.file = res.tempFiles[0];
						this.form.name = res.tempFiles[0].name;
					}
				});
			},
			on_add_data() { //提交问题
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							title: '正在提交'
						});
						if(this.add_data.file){
							uni.uploadFile({
								url: this.$my_global.url + '/wx/quest',
								filePath: this.add_data.file ? this.add_data.file.path : "",
								name: 'f',
								header: {
									"Content-Type": 'multipart/form-data',
									ssid:uni.getStorageSync('token')
								},
								formData: this.form,
								success: (res) => {
									if (res.data && JSON.parse(res.data).sate == 200) {
										this.$refs.uToast.show({
											title: '提交成功',
											type: 'success',
										});
									}
									uni.setStorage({
										key:'setName',
										data:uni.getStorageSync('username'),
										success: () => {
											setTimeout(_ =>{
												uni.setStorageSync('current', 2)
												uni.switchTab({
													url: '/pages/project_wt/project_wt'
												});
											},1000)
										}
									})
								},
								complete:() =>{
									uni.hideLoading();
								}
							});
						}else{
							this.$ajax({
								url: '/wx/quest/json',
								method: 'POST',
								data:this.form,
								success: (res) => {
									if (res.data.state == 200) {
										uni.setStorage({
											key:'setName',
											data:uni.getStorageSync('username'),
											success: () => {
												console.log('ghk')
												setTimeout(_ =>{
													uni.setStorageSync('current', 2)
													uni.switchTab({
														url: '/pages/project_wt/project_wt'
													});
												},1000)
											}
										})
									}
								},
								complete:() =>{
									uni.hideLoading();
								}
							});
						}
						
					} else {
						
					}
				});
				

			},
		},
		created() {
			this.system_info = _get_system_info(uni);

		},
	}
</script>

<style lang="scss" scoped>
.wttb_view {
	width: 100vw;
	min-height: 100vh;
	@include flex_layout_column;
	justify-content: flex-start;
	align-items: flex-start;
	background-color: #FFFFFF;

	.head {
		width: 100vw;
		background-color: #5c77ff;
		height: fit-content;

		>div {
			width: 100vw;
		}

		.head_content {
			padding-left: 5px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.return_bt {
				margin-right: 5px;
			}

			.centre {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 15px;
				color: #eeeeee;
			}
		}
	}

	.content {
		width: 100vw;
		padding: 0 15px;

		u-input {
			background-color: #000000;

			input {}
		}

		u-button {
			width: 100px;
		}
	}
}
.searchContainer {
	background-color: #fff;
	z-index: 999;
	top: 162px;
	position: absolute;
	border: 1px solid #DCDFE6;
	border-radius: 0 0 5px 5px;
	border-top: 0 !important;
	width: 92vw;
	>view {
		margin: 7px 10px 0;
		padding: 8px 0 7px;
		background: 0 0;
		border-top: 2px solid #f5f5f6;
	}
}
.flexContainer {
	display: flex;
	justify-content: space-between;

	.chooseFile {
		width: 50vw;
		border: 1px solid #ccc;
		padding: 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.isColor {
		color: #C0C4CC;
	}
}
</style>
